<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/bootstrap_3.3.7_min.css">
    <link rel="stylesheet" href="../bootstrap/bootstrap-datetimepicker_4.17.47.css">
    <script src="../js/jquery_2.1.1.js"></script>
    <script src="../js/bootstrap_3.3.7_js.js"></script>
    <script src="../bootstrap/moment.js_2.24.0.js"></script>
    <script src="../bootstrap/bootstrap-datetimepicker_4.17.47_js.min.js"></script>
    <script src="../layui/layer/layer.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
</head>
<body>

<div class="container">
    <div class="row clearfix">

        <div class="panel-group" id="accordion">
            <!--            选择题-->
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#selectBank">
                            选择题部分
                        </a>
                        <a href="#addBankModal" data-toggle="modal" style="float: right;"
                           @click="flushQuestionBank('select')">
                            添加
                        </a>
                    </h4>
                </div>
                <div id="selectBank" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="panel panel-default" v-for="(value,index) in selectQuestion.keys()">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" :href="'#collapseSelect'+index">
                                        {{index+1}}. {{selectQuestion.get(value).match(titleRegex)[0]}}
                                    </a>
                                    <a @click="rmSelect('select',value)" style="float: right;">
                                        删除
                                    </a>
                                </h4>
                            </div>

                            <div :id="'collapseSelect'+index" class="panel-collapse collapse">
                                <div class="panel-body" v-html="selectQuestion.get(value)">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!--            填空题-->
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#vacancyBank">
                            填空题部分
                        </a>
                        <a href="#addBankModal" data-toggle="modal" style="float: right;"
                           @click="flushQuestionBank('vacancy')">
                            添加
                        </a>
                    </h4>
                </div>
                <div id="vacancyBank" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="panel panel-default" v-for="(value,index) in vacancyQuestion.keys()">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" :href="'#collapseVacancy'+index">
                                        {{index+1}}. {{vacancyQuestion.get(value).match(titleRegex)[0]}}
                                    </a>
                                    <a @click="rmSelect('vacancy',value)" style="float: right;">
                                        删除
                                    </a>
                                </h4>
                            </div>

                            <div :id="'collapseVacancy'+index" class="panel-collapse collapse">
                                <div class="panel-body" v-html="vacancyQuestion.get(value)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            材料题-->
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#materialBank">
                            材料题部分
                        </a>
                        <a href="#addBankModal" data-toggle="modal" style="float: right;"
                           @click="flushQuestionBank('material')">
                            添加
                        </a>
                    </h4>
                </div>
                <div id="materialBank" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="panel panel-default" v-for="(value,index) in materialQuestion.keys()">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" :href="'#collapseMaterial'+index"
                                       style="overflow:hidden;text-overflow:ellipsis;">
                                        {{index+1}}. {{materialQuestion.get(value).match(titleRegex)[0]}}
                                    </a>
                                    <a @click="rmSelect('material',value)" style="float: right;">
                                        删除
                                    </a>
                                </h4>
                            </div>

                            <div :id="'collapseMaterial'+index" class="panel-collapse collapse">
                                <div class="panel-body" v-html="materialQuestion.get(value)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            完型题-->
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#clozeBank">
                            完型题部分
                        </a>
                        <a href="#addBankModal" data-toggle="modal" style="float: right;"
                           @click="flushQuestionBank('cloze')">
                            添加
                        </a>
                    </h4>
                </div>
                <div id="clozeBank" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="panel panel-default" v-for="(value,index) in clozeQuestion.keys()">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" :href="'#collapseCloze'+index">
                                        {{index+1}}. {{clozeQuestion.get(value).match(titleRegex)[0]}}
                                    </a>
                                    <a @click="rmSelect('cloze',value)" style="float: right;">
                                        删除
                                    </a>
                                </h4>
                            </div>

                            <div :id="'collapseCloze'+index" class="panel-collapse collapse">
                                <div class="panel-body" v-html="clozeQuestion.get(value)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            改错题-->
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#reviseBank">
                            改错题部分
                        </a>
                        <a href="#addBankModal" data-toggle="modal" style="float: right;"
                           @click="flushQuestionBank('revise')">
                            添加
                        </a>
                    </h4>
                </div>
                <div id="reviseBank" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="panel panel-default" v-for="(value,index) in reviseQuestion.keys()">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" :href="'#collapseRevise'+index">
                                        {{index+1}}. {{reviseQuestion.get(value).match(titleRegex)[0]}}
                                    </a>
                                    <a @click="rmSelect('revise',value)" style="float: right;">
                                        删除
                                    </a>
                                </h4>
                            </div>

                            <div :id="'collapseRevise'+index" class="panel-collapse collapse">
                                <div class="panel-body" v-html="reviseQuestion.get(value)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            判断题-->
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#judgeBank">
                            判断题部分
                        </a>
                        <a href="#addBankModal" data-toggle="modal" style="float: right;"
                           @click="flushQuestionBank('judge')">
                            添加
                        </a>
                    </h4>
                </div>
                <div id="judgeBank" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="panel panel-default" v-for="(value,index) in judgeQuestion.keys()">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" :href="'#collapseJudge'+index">
                                        {{index+1}}. {{judgeQuestion.get(value).match(titleRegex)[0]}}
                                    </a>
                                    <a @click="rmSelect('judge',value)" style="float: right;">
                                        删除
                                    </a>
                                </h4>
                            </div>

                            <div :id="'collapseJudge'+index" class="panel-collapse collapse">
                                <div class="panel-body" v-html="judgeQuestion.get(value)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            作文题-->
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#writerBank">
                            作文题部分
                        </a>
                        <a href="#addBankModal" data-toggle="modal" style="float: right;"
                           @click="flushQuestionBank('writer')">
                            添加
                        </a>
                    </h4>
                </div>
                <div id="writerBank" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="panel panel-default" v-for="(value,index) in writerQuestion.keys()">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" :href="'#collapseWriter'+index">
                                        {{index+1}}. {{writerQuestion.get(value).match(titleRegex)[0]}}
                                    </a>
                                    <a @click="rmSelect('writer',value)" style="float: right;">
                                        删除
                                    </a>
                                </h4>
                            </div>

                            <div :id="'collapseWriter'+index" class="panel-collapse collapse">
                                <div class="panel-body" v-html="writerQuestion.get(value)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--            底部按钮-->
            <button type="button" class="btn btn-default" @click="clearPaper()" style="margin-top: 30px;float: right;">
                清空试卷
            </button>
            <button type="button" class="btn btn-info" @click="confirmSub()"
                    style="margin-top:30px;margin-right:30px;float:right;">提交试卷
            </button>
        </div>
    </div>
</div>

<div class="modal fade" id="addBankModal" tabindex="-1" role="dialog" aria-labelledby="addBankModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="addBankModalLabel">添加题目：</h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <div class="form-group" style="float:left;display:flex;width:100%">
                        <input class="form-control" type="text" placeholder="题目">
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' class="form-control" placeholder="出题时间"/>
                            <span class="input-group-addon">
                                <span class="glyphicon">日期</span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group" style="float:left;display:flex;width:100%">
                        <input class="form-control" type="text" placeholder="出题人">
                        <input class="form-control" type="text" placeholder="知识点">
                        <input class="form-control" type="text" placeholder="学期">
                        <input class="form-control" type="text" placeholder="类型">
                        <input type="button" value="查询" @click="listBanks()">
                    </div>
                    <div class="table-responsive" style="float:left;display:flex;width:100%">
                        <table class="table table-hover">
                            <caption>选择题目:</caption>
                            <thead>
                            <tr>
                                <th style="width: 90%">题目</th>
                                <th>选中</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(value,index) in questions">
                                <td v-html="value"></td>
                                <td>
                                    <input v-if="qBanks === 'select'" type="checkbox" :value="index" style="zoom:200%;"
                                           v-model="checkedSelect">
                                    <input v-if="qBanks === 'vacancy'" type="checkbox" :value="index" style="zoom:200%;"
                                           v-model="checkedVacancy">
                                    <input v-if="qBanks === 'material'" type="checkbox" :value="index"
                                           style="zoom:200%;"
                                           v-model="checkedMaterial">
                                    <input v-if="qBanks === 'cloze'" type="checkbox" :value="index" style="zoom:200%;"
                                           v-model="checkedCloze">
                                    <input v-if="qBanks === 'revise'" type="checkbox" :value="index" style="zoom:200%;"
                                           v-model="checkedRevise">
                                    <input v-if="qBanks === 'judge'" type="checkbox" :value="index" style="zoom:200%;"
                                           v-model="checkedJudge">
                                    <input v-if="qBanks === 'writer'" type="checkbox" :value="index" style="zoom:200%;"
                                           v-model="checkedWriter">
                                    {{index}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="flushSelectList()">添加
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#selectBank').collapse('show');
    });
    $(function () {
        $('#vacancyBank').collapse('show')
    });
    $(function () {
        $('#materialBank').collapse('show')
    });
    $(function () {
        $('#clozeBank').collapse('show')
    });
    $(function () {
        $('#reviseBank').collapse('show')
    });
    $(function () {
        $('#judgeBank').collapse('show')
    });
    $(function () {
        $('#writerBank').collapse('show')
    });
    const generatePaper = new Vue({
        el: "#accordion",
        data: {
            titleRegex: /(?<=<label>\n).*?(?=<br>)/,
            selectQuestion: new Map(),
            vacancyQuestion: new Map(),
            materialQuestion: new Map(),
            clozeQuestion: new Map(),
            reviseQuestion: new Map(),
            judgeQuestion: new Map(),
            writerQuestion: new Map(),
            rmFlag: '',
        },
        methods: {
            //删除某个具体的题
            rmSelect: function (delBank, value) {
                if (confirm('确定要删除吗') === true) {
                    if (delBank === 'select') {
                        this.selectQuestion.delete(value);
                        this.rmFlag = value;
                        questionBank.checkedSelect = questionBank.checkedSelect.filter(item => {
                            return item !== this.rmFlag;
                        });
                    } else if (delBank === 'vacancy') {
                        this.vacancyQuestion.delete(value);
                        this.rmFlag = value;
                        questionBank.checkedVacancy = questionBank.checkedVacancy.filter(item => {
                            return item !== this.rmFlag;
                        });
                    } else if (delBank === 'material') {
                        this.materialQuestion.delete(value);
                        this.rmFlag = value;
                        questionBank.checkedMaterial = questionBank.checkedMaterial.filter(item => {
                            return item !== this.rmFlag;
                        });
                    } else if (delBank === 'cloze') {
                        this.clozeQuestion.delete(value);
                        this.rmFlag = value;
                        questionBank.checkedCloze = questionBank.checkedCloze.filter(item => {
                            return item !== this.rmFlag;
                        });
                    } else if (delBank === 'revise') {
                        this.reviseQuestion.delete(value);
                        this.rmFlag = value;
                        questionBank.checkedRevise = questionBank.checkedRevise.filter(item => {
                            return item !== this.rmFlag;
                        });
                    } else if (delBank === 'judge') {
                        this.judgeQuestion.delete(value);
                        this.rmFlag = value;
                        questionBank.checkedJudge = questionBank.checkedJudge.filter(item => {
                            return item !== this.rmFlag;
                        });
                    } else if (delBank === 'writer') {
                        this.writerQuestion.delete(value);
                        this.rmFlag = value;
                        questionBank.checkedWriter = questionBank.checkedWriter.filter(item => {
                            return item !== this.rmFlag;
                        });
                    }


                    this.$forceUpdate();
                }
            },

            //提交试卷
            confirmSub: function () {
                let paperId = window.location.href.split("=")[1];
                let testQuestion = [];
                let questionNum = 1;
                questionBank.checkedSelect.forEach(item => {
                    testQuestion = testQuestion.concat({
                        paperQuestionPid: paperId,
                        paperQuestionBank: 1,
                        paperQuestionQid: item,
                        paperQuestionNumber: questionNum
                    });
                    questionNum++;
                });

                questionBank.checkedVacancy.forEach(item => {
                    testQuestion = testQuestion.concat({
                        paperQuestionPid: paperId,
                        paperQuestionBank: 2,
                        paperQuestionQid: item,
                        paperQuestionNumber: questionNum
                    });
                    questionNum++;
                });
                questionBank.checkedMaterial.forEach(item => {
                    testQuestion = testQuestion.concat({
                        paperQuestionPid: paperId,
                        paperQuestionBank: 3,
                        paperQuestionQid: item,
                        paperQuestionNumber: questionNum
                    });
                    questionNum++;
                });
                questionBank.checkedCloze.forEach(item => {
                    testQuestion = testQuestion.concat({
                        paperQuestionPid: paperId,
                        paperQuestionBank: 4,
                        paperQuestionQid: item,
                        paperQuestionNumber: questionNum
                    });
                    questionNum++;
                });
                questionBank.checkedRevise.forEach(item => {
                    testQuestion = testQuestion.concat({
                        paperQuestionPid: paperId,
                        paperQuestionBank: 5,
                        paperQuestionQid: item,
                        paperQuestionNumber: questionNum
                    });
                    questionNum++;
                });
                questionBank.checkedJudge.forEach(item => {
                    testQuestion = testQuestion.concat({
                        paperQuestionPid: paperId,
                        paperQuestionBank: 6,
                        paperQuestionQid: item,
                        paperQuestionNumber: questionNum
                    });
                    questionNum++;
                });
                questionBank.checkedWriter.forEach(item => {
                    testQuestion = testQuestion.concat({
                        paperQuestionPid: paperId,
                        paperQuestionBank: 7,
                        paperQuestionQid: item,
                        paperQuestionNumber: questionNum
                    });
                    questionNum++;
                });

                console.log(testQuestion);
                axios.post('../operatePaper/insertQuestion',
                    testQuestion
                ).then(function (response) {
                    console.info(response);
                }).catch(function (error) {
                    console.log(error);
                })
            },

            //清空试卷按钮
            clearPaper: function () {
                if (confirm('确定要清空试卷吗') === true) {
                    //刷新试题
                    generatePaper.selectQuestion = new Map();
                    generatePaper.vacancyQuestion = new Map();
                    generatePaper.materialQuestion = new Map();
                    generatePaper.clozeQuestion = new Map();
                    generatePaper.reviseQuestion = new Map();
                    generatePaper.judgeQuestion = new Map();
                    generatePaper.writerQuestion = new Map();

                    questionBank.checkedSelect = [];
                    questionBank.checkedVacancy = [];
                    questionBank.checkedMaterial = [];
                    questionBank.checkedCloze = [];
                    questionBank.checkedRevise = [];
                    questionBank.checkedJudge = [];
                    questionBank.checkedWriter = [];

                }
            },

            //选择添加试题类型刷新展示模态框按钮
            flushQuestionBank: function (frontBank) {
                questionBank.qBanks = frontBank;
                questionBank.questions = [];
                questionBank.$forceUpdate();
            }
        }
    });
    const questionBank = new Vue({
        el: "#addBankModal",
        data: {
            questions: [],

            qBanks: '',
            discipline: 'chinese',
            //存放查询出来的题库
            checkedSelect: [],
            checkedVacancy: [],
            checkedMaterial: [],
            checkedCloze: [],
            checkedRevise: [],
            checkedJudge: [],
            checkedWriter: [],
            //查询条件
            topic: '',
            birth: '',
            founder: '',
            type: 0,
            knowledge: 0,
            term: 0,

        },
        methods: {
            //查询按钮
            listBanks: function () {
                var url = '../search/searchByParams/' + this.qBanks + '/' + this.discipline;
                axios.get(url, {
                    params: {
                        topic: questionBank.topic,
                        birth: questionBank.birth,
                        founder: questionBank.founder,
                        type: questionBank.type,
                        knowledge: questionBank.knowledge,
                        term: questionBank.term
                    }
                }).then(function (response) {
                    console.info(response);
                    questionBank.questions = response.data;
                    questionBank.$forceUpdate();
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //刷新到添加题目map
            flushSelectList: function () {
                if (this.qBanks === 'select') {
                    questionBank.checkedSelect.forEach(item => {
                        generatePaper.selectQuestion.set(item, questionBank.questions[item]);
                    });
                } else if (this.qBanks === 'vacancy') {
                    questionBank.checkedVacancy.forEach(item => {
                        generatePaper.vacancyQuestion.set(item, questionBank.questions[item]);
                    });
                } else if (this.qBanks === 'material') {
                    questionBank.checkedMaterial.forEach(item => {
                        generatePaper.materialQuestion.set(item, questionBank.questions[item]);
                    });
                } else if (this.qBanks === 'cloze') {
                    questionBank.checkedCloze.forEach(item => {
                        generatePaper.clozeQuestion.set(item, questionBank.questions[item]);
                    });
                } else if (this.qBanks === 'revise') {
                    questionBank.checkedRevise.forEach(item => {
                        generatePaper.reviseQuestion.set(item, questionBank.questions[item]);
                    });
                } else if (this.qBanks === 'judge') {
                    questionBank.checkedJudge.forEach(item => {
                        generatePaper.judgeQuestion.set(item, questionBank.questions[item]);
                    });
                } else if (this.qBanks === 'writer') {
                    questionBank.checkedWriter.forEach(item => {
                        generatePaper.writerQuestion.set(item, questionBank.questions[item]);
                    });
                }

                generatePaper.$forceUpdate();

            }
        }
    });

    //日期格式化
    $(function () {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
    });
</script>
</body>
</html>